<!--suppress ALL -->
<template>
  <div class="page showLayerOrFmap-page" data-page="showLayerOrFmap" style="z-index: 2;">
    <div class="link-page-nav">
        <a href="#" class="link back" @click="$root.backToTab()">
            <i class="iconfont icon-zuo"></i>
        </a>
    </div>
    <div class="link-page-top">
        <div class="link-page-title" id="layerTitle"></div>
    </div>
    <div class="page-content">
        <div id="layerOrFmapContainer"></div>
    </div>
  </div>
</template>
<style>
  #layerOrFmapContainer{
    width: 100%;
    height: 100%;
  }
  #decter_layer_content{
      width: 100%;
      position: relative;
      height: 0;
      padding-bottom: 56.25%; 
  }
  .decter_layer_pic{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
  }
  .markpic{
      border-radius: 100px;
  }
</style>
<script>
   return {
      data: function () {
          return {
            fcfId: this.$route.params.fcfId,
          }
      },
      methods: {
          //分层图
          showLayer:function(data){
              let self = this;
              jQuery("#layerOrFmapContainer").empty();
              if(data.layeredGraphUrl){
                  jQuery("#layerOrFmapContainer").append(`
                        <div id="decter_layer_content">
                            <img src="" class="decter_layer_pic" id="decter_layer"  alt="" />
                        </div>
                    `);
                  jQuery("#decter_layer").attr("src",data.layeredGraphUrl);
                  jQuery("#decter_layer_content").each(function () {
                      new RTP.PinchZoom(jQuery(this), {});
                  });
                  self.decterAddpoints(data.picturesMaker);
              }else{
                  jQuery("#layerOrFmapContainer").append(`<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>`);
              }
          },
          decterAddpoints:function(data) {
              let self = this;
              let $ = this.$;
              for (let i = 0; i < data.length; i++) {
                  self.decterAddMark(data[i]);
              }
          },
          decterAddMark:function(data) {
              let container = document.getElementById('decter_layer_content');
              let defaultWidAndH = 20; //初始大小
              let defaultWidAndH_alert = 26;
              let currentWidAndh = defaultWidAndH*0.7;
              let currentWidAndh_alert = defaultWidAndH_alert*0.7;
              let imgOffset = 0 - currentWidAndh / 2 + "px"; //偏移量
              let imgOffset_alert = 0 - currentWidAndh_alert / 2 + "px";
              let x = data.xAxis;
              let y = data.yAxis;
              let makeName = data.makeName; //提示框标题
              let markimage = data.url; //图标url
              let markimage_alertBg = data.alertUrl; //警情种类背景色，放在正常icon底部
              // let pointid = data.relateFcfIds;
              //组合唯一id
              let img = document.createElement("img");
              $(img).attr({
                  "src": markimage,
                  // "id": "mark_normal_"+pointid,
                  "class": "markpic"
              }).css({
                  "width": currentWidAndh + "px",
                  "height": currentWidAndh + "px",
                  "position": "absolute",
                  "left": x + "%",
                  "top": y + "%",
                  "cursor": "pointer",
                  "margin-top": imgOffset,
                  "margin-left": imgOffset,
                  "border-radius": currentWidAndh / 2
              });
              if (markimage_alertBg) {
                  let img_alert = document.createElement("img");
                  $(img_alert).attr({
                      "src": markimage_alertBg,
                      // "id": "mark_alert_"+pointid,
                      "class": "markpic"
                  }).css({
                      "width": currentWidAndh_alert + "px",
                      "height": currentWidAndh_alert + "px",
                      "position": "absolute",
                      "left": x + "%",
                      "top": y + "%",
                      "cursor": "pointer",
                      "margin-top": imgOffset_alert,
                      "margin-left": imgOffset_alert,
                      "border-radius": currentWidAndh_alert / 2
                  });
                  container.appendChild(img_alert);
              }
              container.appendChild(img);
          },
          //室内地图
          showFmap:function(res){
              if(res){
                  jQuery("#layerOrFmapContainer").append(`<div id="eqmentFmap_map" style="width: 100%;height: 100%;"></div>`);
                  //处理数据
                  let mark = {};
                  mark.mapLocation = res.mapLocation;
                  mark.bizId = res.bizId;
                  mark.mapIcon = res.mapIcon;
                  mark.indoorId = res.indoorId;
                  createMap(res.orgIndoorInfo,'eqmentFmap_map',0,mark,res.indoorId);
              }
          }
      },
      on:{
        pageInit: function(e, page) {
            let self = this;
            common.loading(1);
        },
        pageAfterIn: function(e, page) {
            let self = this;
            jQuery("#layerOrFmapContainer").empty();
            Dao.getDecterFacsLocation({
                fcfId:self.fcfId
            },function(data){
                if(data){
                    if(data.markType != 0){
                        if(data.markType == 1){
                          //分层图
                          jQuery("#layerTitle").html("分层图");
                          self.showLayer(data);
                        }else{
                          //室内地图
                          jQuery("#layerTitle").html("室内地图");
                          self.showFmap(data);
                        }
                    }else{
                        jQuery("#layerOrFmapContainer").append(`<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>`);
                    }
                }else{
                    jQuery("#layerOrFmapContainer").append(`<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>`);
                }
            },false);
            common.loading(0);
        },
        pageBeforeRemove: function(e, page) {
          let self = this;
          // if (self.eqmentFmap) {
          //   self.eqmentFmap.dispose();
          // }
        },
      }
   }
</script>